<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="微社区,Q生活" name="keywords"/>
<meta content="微社区,Q生活" name="description"/>
<title>微社区|Q生活</title>
<link rel="stylesheet" href="${ctx }/static/css/Master.css"/>
<script src="${ctx }/static/js/jquery-1.9.0.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<%-- 基础js,所有页面都需要引入此js,依赖layer.js --%>
<script src="${ctx}/static/js/common/base.js"></script>
<script src="${ctx}/static/js/common/util.js"></script>

<style type="text/css">
.fade.in {
  opacity: 1;
}
.detail {
	word-break: break-all;
}
.alert-block {
	padding-top: 14px;
	padding-bottom: 14px;
}
.alert-info {
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  /*background-color: #fcf8e3;*/
  border: 1px solid #fbeed5;
          border-radius: 4px;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
</style>
<script type="text/javascript">
$(function() {
    $(".btn-details").click(function() {
        var td = $(this).closest("td");
        var key = td.data("key");
        var url = "${ctx}/monitor/ehcache/${cacheName}/" + key + "/details";
        $.ajax({    
			    url:url,   
			    data:"",    
			    type:"get",    
			    cache:false,    
			    dataType:"json",
			    async:true, //默认为true 异步    
			    success:function(data) {
			    	var detail = td.find(".detail");
		            if(detail.length) {
		                detail.remove();
		            }
		            detail = $("<div class='detail alert alert-block alert-info in fade'><button type='button' class='close' data-dismiss='alert' onclick='$(this).parent().remove()'>&times;</button></div>");

		            var detailInfo = "";
		            detailInfo += "命中次数:" + data.hitCount;
		            detailInfo +=" | ";
		            detailInfo += "大小:" + data.size;
		            detailInfo +=" | ";
		            detailInfo += "最后创建/更新时间:" + data.latestOfCreationAndUpdateTime;
		            detailInfo +=" | ";
		            detailInfo += "最后访问时间:" + data.lastAccessTime;
		            detailInfo +=" | ";
		            detailInfo += "过期时间:" + data.expirationTime;
		            detailInfo +=" | ";
		            detailInfo += "timeToIdle(秒):" + data.timeToIdle;
		            detailInfo +=" | ";
		            detailInfo += "timeToLive(秒):" + data.timeToLive;
		            detailInfo +=" | ";
		            detailInfo += "version:" + data.version;

		            detailInfo +="<br/><br/>";
		            detailInfo +="值：" + data.objectValue;

		            detail.append(detailInfo);
		            td.append(detail);
			    } 
		});
    });

    $(".btn-delete").click(function() {
        var td = $(this).closest("td");
        var key = td.data("key");
    	top.layer.confirm('确认将"'+key+'"从缓存"${cacheName}"中移除吗?', {icon: 3}, function(index){
            var url = "${ctx}/monitor/ehcache/${cacheName}/" + key + "/delete";
            $.ajax({    
    		    url:url,   
    		    data:"",    
    		    type:"get",    
    		    cache:false,    
    		    dataType:"json",
    		    async:true, //默认为true 异步    
    		    success:function(data) {
    	            td.closest("tr").remove();
    	            top.layer.msg(data,{},function(){
    	                top.layer.close(index);   
    	            });
    		     } 
    		});
    	});

    });

    $(".btn-clear").click(function() {
    	top.layer.confirm('确认清空缓存"${cacheName}"吗?', {icon: 3}, function(index){
             var url = "${ctx}/monitor/ehcache/${cacheName}/clear";
             $.ajax({    
     		    url:url,   
     		    data:"",    
     		    type:"get",    
     		    cache:false,    
     		    dataType:"json",
     		    async:true, //默认为true 异步    
     		    success:function(data) {
     	            top.layer.msg(data,{},function(){
     	            	window.location.reload();  
     	            });
     		     } 
     		});
        });
    });
});

</script>
</head>

<body class="utilSubmit">

<section class="boxRight">
	<form id="searchForm" method="get" action="${ctx }/monitor/ehcache/${cacheName}/detailList">
		<div class="context boxborder">
		
			<!-- 查询 -->
			<div class="SearchList">
				<ul class="clearfix">
					<li><span class="name">键：</span><span class="pt"><input type="text" id="searchText" name="searchText" value="${searchText }" /></span></li>
					<li class="combtn pr"><a href="javascript:void(0);" onclick="$(this).parents('form').submit();" class="utilSubmitBtn">查询</a><a href="javascript:void(0);" class="utilReset">重置</a> </li>
				</ul>
			</div>
		
			<!-- 顶部按钮 -->
			<div class="pr prlink">
				<a href="javascript:void(0);" onclick="location.href='${ctx}/monitor/ehcache'">&lt;&lt;返回</a>
				<a href="javascript:void(0);" onclick="location.reload();">刷新</a>
				<shiro:hasPermission name="monitor:ehcache:clear">
				<a href="javascript:void(0);" class="btn-clear">清空缓存</a>
				</shiro:hasPermission>
			</div>
			
			<!-- 内容 -->
			<div class="com_table">
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<th width="62px;">序号</th>
						<th width="350px;">键</th>
						<th>值</th>
						<th width="40px;">操作</th>
					</tr>
					
					<c:forEach items="${keys}" var="key" varStatus="status">
					<tr>
						<td>${status.count}</td>
						<td>${key}</td>
						<td data-key="${key}" style="text-align: left;"><a href="javascript:void(0)" class="btn-details">查看详细</a></td>
						<td data-key="${key}">
							<shiro:hasPermission name="monitor:ehcache:delete">
	                       	<a class="icon micon_20 btn-delete" title="移除" href="javascript:void(0);" ></a>
	                    	</shiro:hasPermission>
						</td>
					</tr>
					</c:forEach>
				</table>
				
			</div>
		</div>
		</form>

</section>
</body>
</html>
